<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-07-19 09:42:10
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-11-08 16:18:43
 * @Description:
 *
-->

<template>
  <div class="cn-insight-service-container">
    <div style="background:#FFFFFF;margin:15px">
      <!-- 数据源选择-->
      <el-row style="padding-top:15px">
        <el-col :span="5" style="margin-left:25px">
          <el-radio-group v-model="modeType" @change="changeType">
            <el-radio label="AI"><span style="color:#4A4A4A">AI应用</span></el-radio>
            <el-radio label="BIGDATA"><span style="color:#4A4A4A">大数据应用</span></el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- 条件过滤-->
      <el-row style="margin-top:20px;font-weight:900;padding-bottom:20px">
        <el-col style="width:80px;margin-left:25px" :span="2">
          应用名称
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="applicationName"
            size="mini"
            placeholder="请选择应用名称"
            style="width: 90%"
            @change="getMicro"
          >
            <el-option
              v-for="item in applicationNameOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col style="width:90px;margin-left:20px" :span="2">
          微服务名称
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="microserviceName"
            :clearable="true"
            size="mini"
            placeholder="请选择微服务名称"
            style="width: 90%"
          >
            <el-option
              v-for="item in microserviceNameOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col style="margin-left:20px" :span="1">
          <el-button type="primary" size="mini" :loading="isResult" @click="search()">查询</el-button>
        </el-col>
        <el-col :span="1" style="margin-left: 20px;">
          <el-button size="mini" @click="research()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 趋势图-->
    <el-row>
      <div style="background:#FFFFFF;margin:15px">
        <div id="AIMap" style="width:100%;height:500px"></div>
      </div>
    </el-row>
    <!-- 表格数据-->
    <el-row>
      <div style="background:#FFFFFF;margin:15px">
        <div class="editmanageList">
          <el-table
            :data="tableList"
            :cell-style="cellStyle"
            stripe
            header-cell-class-name="listHeaderCell"
            :header-cell-style="{ color: '#696969' }"
            empty-text="暂无数据"
          >
            <el-table-column
              prop="index"
              align="center"
              label="序号"
              width="80px"
            />
            <el-table-column
              prop="applicationName"
              align="center"
              label="应用名称"
            />
            <el-table-column
              prop="microServiceName"
              align="center"
              label="微服务名称"
            />
            <el-table-column
              prop="deployName"
              align="center"
              label="负载名称"
            />
            <el-table-column
              prop="user"
              align="center"
              label="上传者"
              width="100px"
            />
            <el-table-column
              prop="totalNum"
              align="center"
              label="实例个数"
            >
              <template slot-scope="scope">
                <el-progress type="line" :percentage="(scope.row.normalNum)/(scope.row.totalNum==0?0.00001:scope.row.totalNum)*100" :format="format(scope.row.normalNum,scope.row.totalNum)" color="#00EAFF80" :text-inside="false" :stroke-width="12" />
              </template>
            </el-table-column>
            <el-table-column
              prop="clusters"
              align="center"
              label="部署集群"
            >
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.clusterNames" :key="index" class="clickStyle" @click="linkToConsole(item.id,item.value,scope.row.deployName)">
                  {{ item.id }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="clusterProviders"
              align="center"
              label="集群服务商"
            >
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.clusterNames" :key="index" class="clickStyle" @click="linkToConsole(item.id,item.value,scope.row.deployName)">
                  {{ item.value }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="namespace"
              align="center"
              label="命名空间"
            />
            <el-table-column
              prop="status"
              align="center"
              label="当前状态"
              width="100px"
            >
              <template slot-scope="scope">
                <div><span>•</span>&nbsp;<span>{{ scope.row.status }}</span></div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="modeType=='AI'"
              prop="totalLinkedNum"
              align="center"
              label="总请求数"
            />
            <el-table-column
              v-if="modeType=='AI'"
              prop="createTime"
              align="center"
              label="创建时间"
            />
            <el-table-column
              v-if="modeType=='BIGDATA'"
              prop="createTime"
              align="center"
              label="开始时间"
            />
            <el-table-column
              v-if="modeType=='BIGDATA'"
              prop="duringTime"
              align="center"
              label="处理时间(m)"
            />
            <el-table-column
              v-if="modeType=='BIGDATA'"
              prop="updateTime"
              align="center"
              label="完成时间"
            />
            <el-row type="flex" justify="end" style="margin-top: 30px">
              <el-pagination
                background
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalData"
                @current-change="currentChange"
              />
            </el-row>
          </el-table></div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAppList, getMicroList, getAppTableData, getAppMapData } from '@/api/cnap/cn-insight'
export default {
  name: 'CNInsightService',
  components: {},
  mixins: [],
  data() {
    return {
      isResult: false,
      modeType: 'AI', // 页面数据类型
      applicationName: '', // 应用名称
      applicationNameOptions: [], // 应用列表
      microserviceNameOptions: [], // 微服务列表
      microserviceName: '', // 微服务名称
      AIMap: null, // 趋势图
      currentPage: 1, // 表格当前页
      pageSize: 10, // 每页数量
      totalData: 15, // 表格总数
      tableList: [], // 表格数据
      mapData: {}, // 趋势图数据
      timer: null// 定时器
    }
  },
  computed: {},
  created() {},
  beforeDestroy() {
    // 摧毁定时器
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.getApp()// 数据初始化
  },
  methods: {
    /**
     * @description: 改变页面数据类型
     * @description: 重新加载数据
     * @return {*}
     */
    changeType(val) {
      this.modeType = val// 数据类型
      this.applicationName = ''// 应用置空
      this.microserviceName = ''// 微服务置空
      this.applicationNameOptions = []// 应用列表置空
      this.microserviceNameOptions = []// 微服务列表置空
      this.getApp()
    },
    /**
     * @description: 获取应用列表
     * @description: 切换页面类型触发
     * @return {*}
     */
    getApp() {
      const params = {
        type: this.modeType
      }
      getAppList(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          this.applicationNameOptions = res.data// 应用列表赋值
          this.applicationName = res.data[0].id// 自动选取第一个
          this.getMicro(this.applicationName)// 获取微服务列表
          this.pageInite()// 获取表格数据
        }
      })
    },
    /**
     * @description: 获取微服务列表
     * @description: 切换应用触发
     * @return {*}
     */
    getMicro(val) {
      const params = {
        applicationId: val
      }
      this.microserviceName = ''
      getMicroList(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          this.microserviceNameOptions = res.data
        }
      })
    },
    /**
     * @description: 页面跳转
     * @description: 跳转集群控制台
     * @return {*}
     */
    linkToConsole(clusters, clusterProviders, deployName) {
      this.$router.push({
        path: '/hybrid-cloud/cluster',
        query: {
          k8sClusterName: clusters,
          cloudVendor: clusterProviders,
          targetTab: 'workload',
          keyword: deployName
        }
      })
    },
    /**
     * @description: 点击搜索
     * @description: 获取数据
     * @return {*}
     */
    search() {
      this.isResult = true
      this.pageInite(1)
    },
    /**
     * @description: 重置搜索
     * @description: 获取数据
     * @return {*}
     */
    research() {
      this.applicationName = ''// 应用置空
      this.microserviceName = ''// 微服务置空
      this.applicationNameOptions = []// 应用列表置空
      this.microserviceNameOptions = []// 微服务列表置空
      this.getApp()
    },
    /**
     * @description: 各种操作触发
     * @description: 获取数据
     * @return {*}
     */
    pageInite(page) {
      clearInterval(this.timer)// 清空之前的定时器
      this.timer = null// 清空定时器
      this.tableList = []// 表格数据置空
      this.mapData = []// 趋势图数据置空
      const params = {
        pageNum: page || this.currentPage,
        page: 10,
        applicationId: this.applicationName,
        mircoServiceId: this.microserviceName,
        type: this.modeType
      }
      // 重新加载定时器
      // 15秒加载一次数据

      this.timer = setInterval(() => {
        this.getTableData(params)
      }, 15000)
      this.getTableData(params)// 表格数据
      this.getMapData(params)// 趋势图数据
      this.isResult = false
    },
    /**
     * @description: 各种操作触发
     * @description: 获取表格数据
     * @return {*}
     */
    getTableData(params) {
      getAppTableData(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          this.tableList = res.data.data
          for (let i = 0; i < this.tableList.length; i++) {
            this.tableList[i].index = (this.currentPage - 1) * this.pageSize + i + 1// 标号
            this.tableList[i].status = this.changeStatue(this.tableList[i].status)// 状态
          }
          this.totalData = res.data.totalCount// 总数
        } else {
          (
            // 数据查询失败
            // 输出报错信息
            this.$message.error(res.message)
          )
        }
      })
    },
    /**
     * @description: 改变页码
     * @description: 获取数据
     * @return {*}
     */
    currentChange(val) {
      const params = {
        page: val,
        pageSize: 10,
        applicationId: this.applicationName,
        mircoServiceId: this.microserviceName,
        type: this.modeType
      }
      this.getTableData(params)// 表格数据
    },
    /**
     * @description: 数据转化
     * @description: 改变表格状态值，加载不同样式
     * @return {*}
     */
    changeStatue(val) {
      if (val === '0') {
        return '初始化'
      }
      if (val === '1') {
        return '已启用'
      }
      if (val === '2') {
        return '已暂停'
      }
      if (val === '3') {
        return '启动中'
      }
      if (val === '4') {
        return '删除中'
      }
      if (val === '5') {
        return '已结束'
      }
      if (val === '6') {
        return '删除'
      }
      if (val === '7') {
        return '失败'
      } else {
        return '未知状态'
      }
    },
    /**
     * @description: 数据转化
     * @description: 改变表格状态值，加载不同样式
     * @return {*}
     */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 状态列字体颜色
      if (row.status === '初始化' && columnIndex === 9) {
        return 'color: rgba(109, 212, 0, 1)'// 初始化
      } else if (row.status === '已启用' && columnIndex === 9) {
        return 'color: rgba(98, 54, 255, 1)'// 已启用
      } else if (row.status === '已暂停' && columnIndex === 9) {
        return 'color: rgba(247, 181, 0, 1)'// 已暂停
      } else if (row.status === '启动中' && columnIndex === 9) {
        return 'color: rgba(0, 145, 255, 1)'// 启动中
      } else if (row.status === '删除中' && columnIndex === 9) {
        return 'color: rgba(232, 82, 91, 1)'// 删除中
      } else if (row.status === '已结束' && columnIndex === 9) {
        return 'color: rgba(144, 157, 174, 1)'// 已结束
      } else if (row.status === '删除' && columnIndex === 9) {
        return 'color: rgba(250, 100, 0, 1)'// 删除
      } else if (row.status === '未知状态' && columnIndex === 9) {
        return 'color: rgba(105, 105, 105, 1)'// 未知状态
      } else {
        return 'color: rgba(105, 105, 105, 1)'// 其他
      }
    },
    /**
     * @description: 获取趋势图数据
     * @description: 点击触发
     * @return {*}
     */
    getMapData(params) {
      getAppMapData(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          this.mapData = res.data.data
          this.drawMap()// 绘制趋势图
        } else {
          (
            // 数据查询失败
          // 输出报错信息
            this.$message.error(res.message)
          )
        }
      })
    },
    /**
     * @description: 步骤条进度
     * @description: 表格加载触发
     * @return {*}
     */
    format(row, column) {
      return () => {
        return row + '/' + column
      }
    },
    /**
     * @description: 趋势图绘制
     * @description: 不同页面类型有所不同
     * @return {*}
     */
    drawMap() {
      // 防止重复启动
      // 节省内存
      if (this.AIMap == null) {
        this.AIMap = echarts.init(document.getElementById('AIMap'))
      }
      // const COLOR = ['rgba(134, 254, 6, 0.7)', 'rgba(252, 255, 50, 0.7)', 'rgba(247, 181, 0, 0.7)', 'rgba(255, 86, 145, 0.65)', 'rgba(54, 166, 255, 0.6)', 'rgba(1, 255, 231, 0.65)', 'rgba(6, 254, 176, 0.7)']
      const BORDER_COLORS = ['rgba(18, 241, 235, 1)', 'rgba(8, 175, 255, 1)', 'rgba(108, 0, 255, 1)', 'rgba(13, 232, 3, 1)', 'rgba(18, 224, 241, 1)', 'rgba(0, 145, 255, 1)', 'rgba(157, 0, 255, 1)', 'rgba(18, 241, 166, 1)', 'rgba(17, 204, 248, 1)', 'rgba(15, 51, 238, 1)']
      const option = {
        title: {
          text: '当前请求数 / 实例数量变化曲线',
          textStyle: {
            align: 'left',
            fontSize: 14
          },
          top: '2%', // 位置
          left: '2%'// 位置
        },
        grid: {
          top: '25%', // 位置
          left: '5%', // 位置
          right: '5%', // 位置
          bottom: '5%'// 也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          data: [],
          top: '8%', // 位置
          left: '2%', // 位置
          align: 'left', // 位置
          textStyle: {
            color: '#C4C6CC'// 颜色
          }
        },
        xAxis: {
          data: this.mapData.xData,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#C4C6CC'// 颜色
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#C4C6CC' // X轴文字颜色
            }
          }
        },
        yAxis: [{
          type: 'value',
          minInterval: 1,
          name: '请求数',
          nameTextStyle: {
            color: '#C4C6CC'// 颜色
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#C4C6CC'// 颜色
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#C4C6CC'// 颜色
            }
          }

        },
        {
          type: 'value',
          name: '实例数',
          minInterval: 1,
          nameTextStyle: {
            color: '#C4C6CC'// 颜色
          },
          position: 'right', // 位置
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} ', // 右侧Y轴文字显示
            textStyle: {
              color: '#C4C6CC'// 颜色
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50, // 数值范围
          max: 100, // 数值范围
          splitNumber: 8, // 最小间隔
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']// 颜色
            }
          }
        }
        ],
        series: [
        ]
      }
      const Ydata = this.mapData.yData// Y轴数据
      for (let i = 0; i < Ydata.length; i++) {
        const requestName = Ydata[i].name + '请求数'// 名称
        const instancesName = Ydata[i].name + '实例数'// 名称
        option.legend.data.push(requestName)// 标题
        option.legend.data.push(instancesName)// 标题
        option.series.push(
          {
            name: instancesName, // 名称
            type: 'line',
            yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, // 平滑曲线显示
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 5, // 标记的大小
            itemStyle: {
            // 折线拐点标志的样式
              color: BORDER_COLORS[i]
            },
            lineStyle: {
              color: BORDER_COLORS[i]// 颜色
            },
            data: Ydata[i].instancesNum// Y轴数据
          }
        )
        if (this.modeType === 'AI') { // 类型判断
          option.series.push({
            name: requestName, // 名称
            type: 'bar', // 类型
            barWidth: 15, // 宽度
            itemStyle: {
              normal: {
                color: BORDER_COLORS[i]// 颜色
              }
            },
            data: Ydata[i].requestNum// Y轴数据
          })
        }
      }
      this.AIMap.setOption(option, true)
    }
  }
}
</script>

<style lang="less" scoped>
.cn-insight-service-container {
    .el-radio-button {
      margin-right: 50px !important;
  }
  .clickStyle{
    color: rgba(17, 204, 248, 1);
    cursor:pointer
  }
}
</style>
